<template>
  <uni-popup v-if="showValue" ref="popup" :is-mask-click="false">
    <view class="review-content">
      <view class="review-enter-box">
        <view class="review-item-box">
          <image class="review-item-img" :src="reviewImgUrl" mode="aspectFit" />
          <text class="dialog-title">审核结果：</text>
        </view>
        <view class="checkbox-dialog-box">
          <uni-data-checkbox v-model="reviewState" :localdata="status" />
        </view>
        <view v-if="showReason && reviewState === 1" class="reason-box">
          <uni-easyinput type="textarea" v-model="reviewReason" placeholder="请输入不通过的原因" :maxlength="200"></uni-easyinput>
        </view>
        <view class="review-btm-box">
          <button class="btm-btn item-confirm-btn" @click="confirmClick">确认</button>
          <button class="btm-btn item-cancel-btn" @click="cancelClick">取消</button>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import {imgHost} from "@/utils/api";
import {isEmpty, showToast} from "@/utils/utils";

/** 审核弹窗 */
export default {
  name: "ReviewDialog",
  props: {
    /** 是否展示弹窗 */
    showValue: {
      type: Boolean,
      required: true,
      default: false
    },
    /** 是否可以添加审核不通过原因 */
    showReason: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      reviewImgUrl: imgHost + 'icon_review.png',
      reviewState: undefined,
      status: [{
        text: '通过',
        value: 0
      }, {
        text: '不通过',
        value: 1
      }],
      reviewReason: '', // 不通过原因
    }
  },
  watch: {
    showValue: {
      immediate: true,
      handler(value) {
        if (value) {
          this.$refs.popup.open('center')
        } else {
          this.reviewState = -1
          this.reviewReason = ''
        }
      }
    }
  },
  methods: {
    // 确认
    confirmClick() {
      if (isEmpty(this.reviewState) || this.reviewState === -1) {
        showToast('请选择审核状态')
        return
      }
      if (this.showReason && this.reviewState === 1 && isEmpty(this.reviewReason)) {
        showToast('请输入审核不通过的原因')
        return;
      }
      const reasonStr = this.reviewState === 0 ? '' : this.reviewReason
      this.$emit('confirmClick', this.reviewState, reasonStr)
    },
    // 关闭弹窗
    cancelClick() {
      this.$emit('cancelClick')
      this.$refs.popup.close()
    }
  }
}
</script>

<style scoped lang="scss">
.review-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .review-enter-box {
    padding: 30rpx;
    margin: 0 30rpx;
    width: 80vw;
    background: #FFFFFF;
    box-shadow: 0 6rpx 25rpx 7rpx rgba(0, 0, 0, 0.11);
    border-radius: 8rpx;
    position: relative;
    .review-item-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 20rpx 0;
      .review-item-img {
        width: 46rpx;
        height: 46rpx;
        margin-right: 15rpx;
      }
      .dialog-title {
        height: 60rpx;
        font-size: 30rpx;
        font-weight: bolder;
        color: #333333;
        line-height: 60rpx;
        display: inline-block;
      }
    }
    .checkbox-dialog-box {
      padding: 20rpx;
    }
    .reason-box {
      margin: 20rpx 0;
    }
    .review-btm-box {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      padding: 20rpx 0;
      .btm-btn {
        margin: 0;
        width: 160rpx;
        height: 60rpx;
        border-radius: 30rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 60rpx;
      }
      .item-confirm-btn {
        background: #E42417;
      }
      .item-cancel-btn {
        margin-left: 25rpx;
        background: #919191;
      }
    }
  }
}
</style>
